<template>
  <div>
    <el-row>
      <el-col :span="10">
        <div class="recent-post-item shadow-box background-opacity" v-if="!$common.isEmpty(gridDataLeft)"
             @click="toArticlePage(gridDataLeft.id)">

          <!-- 内容 -->
          <el-image class="my-el-image"
                    lazy
                    :src="!$common.isEmpty(gridDataLeft.imageUrl)?gridDataLeft.imageUrl:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                    fit="cover">

            <template #error>
              <div class="image-slot myCenter" style="background-color: var(--lightGreen)">
                <div class="error-text">
                  <div>遇事不决，可问春风</div>
                </div>
              </div>
            </template>
          </el-image>

          <div class="post-info">
            <div class="slider-cat">
              <span class="b2-radius"><b style="border-left:4px solid #607d8b"></b><div
                style="margin-left: 5px;display: inline-block;">{{ gridDataLeft.blogSort.sortName }}</div></span>
            </div>
            <h2>{{ gridDataLeft.articleTitle }}</h2>
            <div class="slider-user">
              <div style="height: 24px;width: 24px;border-radius: 12px">
                <el-image class="my-el-image"
                          style="height: 24px;width: 24px;border-radius: 12px"
                          lazy
                          :src="!$common.isEmpty(gridDataLeft.imageUrl)?gridDataLeft.imageUrl:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                          fit="cover">

                  <template #error>
                    <div class="image-slot myCenter" style="background-color: var(--lightGreen)">
                      <div class="error-text">
                        <div>遇事不决，可问春风</div>
                      </div>
                    </div>
                  </template>
                </el-image>
              </div>
              <div style="font-size: 14px;margin-left: 20px">
                {{ gridDataLeft.userName }}
              </div>
            </div>
          </div>
        </div>

      </el-col>

      <el-col :span="14">

        <el-row>
          <el-col :span="12" v-for="(article,index) in gridDataRight">
            <div class="recent-post-item shadow-box background-opacity recent-post-item-right"
                 v-if="!$common.isEmpty(article)"
                 @click="$router.push({path: '/article', query: {id: article.id}})">
              <!-- 内容 -->
                <el-image class="my-el-image"
                          lazy
                          :src="!$common.isEmpty(article.imageUrl)?article.imageUrl:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                          fit="cover">

                  <template #error>
                    <div class="image-slot myCenter" style="background-color: var(--lightGreen)">
                      <div class="error-text">
                        <div>遇事不决，可问春风</div>
                      </div>
                    </div>
                  </template>
                </el-image>


              <div class="post-info" style="padding: 10px">
                <div class="slider-cat">
                  <span class="b2-radius"><b style="border-left:4px solid #607d8b"></b><div
                    style="margin-left: 5px;display: inline-block;">{{ article.blogSort.sortName }}</div></span>
                </div>
                <div style="margin-top: 5px;margin-bottom: 5px">{{ article.articleTitle }}</div>
                <div class="slider-user">
                  <div style="height: 24px;width: 24px;border-radius: 12px">
                    <el-image class="my-el-image"
                              lazy
                              style="border-radius: 12px"
                              :src="!$common.isEmpty(article.avatar)?article.imageUrl:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
                              fit="cover">

                      <template #error>
                        <div class="image-slot myCenter" style="background-color: var(--lightGreen)">
                          <div class="error-text">
                            <div>遇事不决，可问春风</div>
                          </div>
                        </div>
                      </template>
                    </el-image>
                  </div>
                  <div style="font-size: 14px;margin-left: 20px">
                    {{ article.userName }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>
</template>


<script setup>


import {computed} from "vue";

import * as $common from "@/utils/common";
import {getArticle} from "@/api/weblog/article";

const emits = defineEmits(['selectSort2'])
const props = defineProps({
  articleList: {
    type: Array,
    default: () => []
  },
});
const router = useRouter();
const toArticlePage=async (articleId) => {

  let res = await getArticle(articleId);
  switch (res.viewStatus) {
    case 2:
      // 执行代码块2
      break;
    case 3:
      // 执行代码块2
      break;
    case 4:
      // 执行代码块2
      break;
    case 5:
      // 执行代码块2
      break;
    default:
      await router.push({path: '/article', query: {id: articleId}})
  }
}

const gridDataRight = computed(() => {
  if (props.articleList.length <= 5) {
    // 如果长度小于或等于5，返回整个数组
    return props.articleList.slice(1, props.articleList.length);
  } else {
    // 否则，返回前五个元素
    return props.articleList.slice(1, 5);
  }
});


const gridDataLeft = computed(() => {
  return props.articleList.slice(0, 1)[0];
});

</script>


<style scoped>
.recent-post-container .recent-post-item {
  margin-bottom: 40px;
}

.recent-post-item-right {
  height: 175px !important;
  margin: 8px !important;
}

.slider-user {
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 10px;
  position: relative;
  z-index: 2;
  height: 24px;
}

.post-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: white;
  z-index: 1;
  text-align: left;
  box-sizing: border-box;
  justify-content: flex-end;
  display: flex;
  flex-flow: column;
  padding: 20px;
  background: linear-gradient(1turn, rgba(9, 15, 29, .4), transparent);
}

.recent-post-item {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
  height: 366px;
  flex-shrink: 0;
  /*width: calc(33.33333% - 20px);*/
  cursor: pointer;
  -webkit-animation: zoomIn .8s ease-in-out;
  animation: zoomIn .8s ease-in-out;
  animation-name: zoomIn;
}


.recent-post-item :deep(.el-image__inner ) {
  transition: all 1s;
}

.recent-post-item :deep(.el-image__inner:hover) {
  transform: scale(1.2);
}


.recent-post-item-post h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
}

.recent-post-item-post h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


.post-meta i {
  font-size: 15px;
}

.post-meta span:not(:last-child) {
  margin-right: 10px;
}

.leftImage .sort-label {
  position: absolute;
  bottom: 20px;
}

.sort-label {
  position: absolute;
  bottom: 10px;
}

.rightImage .sort-label {
  position: absolute;
  bottom: 20px;
  right: 35px;
}

.sort-label span {
  padding: 3px 10px;
  background-color: var(--maxLightGray);
  border-radius: 3px;
  font-size: 14px;
  color: var(--greyFont);
  transition: all 0.3s;
  cursor: pointer;
  user-select: none;
}

.sort-label span:hover {
  background-color: var(--themeBackground);
  color: var(--white);
}

.error-text {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 8px;
  color: var(--white);
}

@media screen and (max-width: 700px) {
  .recent-post-item {
    height: 450px;
    position: unset;
    display: block;
    flex-direction: unset;
  }


  .leftImage .sort-label {
    position: absolute;
    bottom: 20px;
  }

  .rightImage .sort-label {
    position: absolute;
    bottom: 20px;
    right: unset;
  }
}

</style>
